<template>
  <div class="contacts">
    <ul>
      <li v-for="(v,k) in friends" :key="k">
        <div class="list-img">
          <img :src="v.avatar" />
        </div>
        <div class="list-content" @click="details(k)">
          <p class="name">{{v.username}}</p>
          <p class="content"></p>
        </div>
        <div class="list-date"></div>
      </li>
    </ul>
    <!--<p class="contacts-count">共{{contactsCount}}位联系人</p>-->
  </div>
</template>

<script>
//联系人
export default {
  name: "contacts",
  data() {
    return {
      chatList: []
    };
  },
  created() {},
  computed: {
    friends() {
      return this.$store.getters.getFriends;
    }
  },
  methods: {
    //跳转聊天页面
    details(k) {
      this.$router.push({
        path: "/chat_details",
        query: {
          k: k
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.contacts {
  padding-bottom: 50px;

  ul {
    li {
      height: 50px;
      background: white;
      padding: 5px;

      .list-img {
        width: 15%;
        height: 100%;
        float: left;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-left: 10px;
        }
      }

      .list-content {
        width: 65%;
        height: 100%;
        float: left;

        .name {
          font-size: 18px;
          margin: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .content {
          font-size: 14px;
          margin: 0;
          color: #787979;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .list-date {
        width: 10%;
        height: 100%;
        float: left;
        margin-left: 5%;

        .date {
          font-size: 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .contacts-count {
    text-align: center;
    font-size: 14px;
    color: #787979;
  }
}
</style>
